<template>
  <div>
    <h2>获取mock数据的页面</h2>
    <button @click="getData">GET请求数据</button>
    <p v-if="city.city">
      {{ city.curDate }} - {{ city.str }} - {{ city.city }}
    </p>
    <div style="margin-top: 30px;"></div>
    <button @click="postData">POST请求数据</button>
    <div style="margin-top: 30px;"></div>
    <button @click="getDevice">获取设备</button>
  </div>
</template>

<script setup lang="ts" name="Demo01">
import { stat } from 'fs/promises';
import { reactive, getCurrentInstance } from 'vue' // 0.引入getCurrentInstance
const { proxy } = getCurrentInstance() // 1.获取proxy实例
const city = reactive({ curDate: null,str:null,city:null })
// const info = reactive({ data: '张三', city: 18, string })
const getData = async () => {
    // console.log(proxy.$http)
    const {data:{data:info}} = await proxy.$http.get('/obtain')
    Object.assign(city,info)
    // console.log(info)
}
const postData = async () => {
    const {data:{status,msg}} = await proxy.$http.post('/requestPostData',{name:'张三',age:18})
    alert(status +','+ msg)
}
const getDevice = async () => {
    const {data:{data:info}} = await proxy.$http.get('/device/get')
    console.log(info)
}
</script>

<style scoped>

</style>
